<template>
    <div class="register-container">
        <el-card class="box-card">
            <h2 class="title">注册</h2>
            <div class="forminput">
                <el-input v-model="username" @input="inputt" placeholder="请输入用户名"></el-input>
            </div>
            <div class="forminput">

                <el-input type="password" v-model="password" placeholder="请输入密码"></el-input>
            </div>
            <div class="forminput">

                <el-input type="password" v-model="confirmPassword" placeholder="请再次输入密码"></el-input>
            </div>
            <div class="forminput">
                <el-input  v-model="telephone" placeholder="请输入手机号"></el-input>
            </div>
            <div class="forminput">


                <el-button type="primary" @click="handleRegister" :loading="loading">注册</el-button>
            </div>

            <div class="tips" @click="goToLogin">已有账号？去登录</div>


        </el-card>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import router from '@/router';
import service from '@/utils/request';
import axios from 'axios';
const username = ref("");
const password = ref("");
const confirmPassword = ref("");
const telephone = ref("");
const registerForm = reactive({
    username: "",
    password: "",
    confirmPassword: "",
    telephone: ""
});
const inputt = (e) => {
    console.log(e)


};

const loading = ref(false);
const validatePhone=()=> {

      const regex = /^1[3-9]\d{9}$/; // 中国大陆手机号正则，以1开头，第二位3-9，后面是9位数字
      return regex.test(telephone.value);
    }
const handleRegister = async () => {
    if(username.value == ''){
        ElMessage({
            message: '请输入用户名',
            type: 'warning',
        })
        return
   
    }
    if(password.value == ''){
        ElMessage({
            message: '请输入密码',
            type: 'warning',
        })
        return
   
    }
    if(telephone.value == ''){
        ElMessage({
            message: '请输入电话',
            type: 'warning',
        })
        return
   
    }
    if (password.value !== confirmPassword.value) {
        ElMessage({
            message: '确认密码和密码不一致',
            type: 'warning',
        })
        return
    }
    if(validatePhone()==false){
        ElMessage({
            message: '手机号格式不正确',
            type: 'warning',
        })
        return


    }


    const res = await service.post("/api/user/register", {
        username: username.value,
        password: password.value,
        telephone:telephone.value
    })
console.log(res)
if(res.code == 0){
    ElMessage.success('注册成功！');    
     router.push({
        path: "/"
    })
}else{
    ElMessage.warning(res.message);    
    
}
    // loading.value = false;
    // ElMessage.success('注册成功！');

    // router.push({
    //     path: "/"
    // })
    // 这里可以加入实际的注册逻辑

};

const goToLogin = () => {
    router.push({
        path: "/"
    })
};



</script>

<style scoped>
.forminput {
    margin-bottom: 10px;
}

.register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: url('../assets/bg.png') no-repeat center center fixed;
    background-size: cover;
}

.tips {
    width: 100%;
    text-align: right;
    font-size: 14px;
    cursor: pointer;
}

.box-card {
    width: 360px;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.9);
}

.title {
    text-align: center;
    margin-bottom: 20px;
    color: #303133;

}

.register-form {
    width: 100%;
}

.el-form-item__label {
    color: #303133;
}

.el-input {
    width: 100%;
}

.el-button {
    width: 100%;
}

.el-link {
    display: block;
    text-align: center;
}
</style>